<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.3.js">
			
		</script>
		<style>
			*{
				border:0px;
				margin: 0px;
				padding: 0px;
			}
			body{
				width: 100%;
				height: auto;
				background-color: #000000;
			}
			.box{
				width: 620px;
				margin: 0 10px;
				position: absolute;
				left: 200px;
				top: 50px;
				height:auto;
				background-color: #000000;
				
			}
			.box ul li{
				width: 200px;
				height: 200px;
				float: left;
			}
			.box ul li a img{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><a href=""><img src="../images/11.JPG"/></a></li>
				<li><a href=""><img src="../images/22.JPG"/></a></li>
				<li><a href=""><img src="../images/33.JPG"/></a></li>
				<li><a href=""><img src="../images/44.JPG"/></a></li>
				<li><a href=""><img src="../images/22.JPG"/></a></li>
				<li><a href=""><img src="../images/11.JPG"/></a></li>
			</ul>
		</div>
		<script>
			//需求1:给小人物所在的li标签设置鼠标移入事件：当前li标签透明度为1，其他的兄弟标签透明度为0.4
			//需求2：鼠标离开盒子,所有的标签透明度改为1
			
			
			//需求1：
//			console.log($(".box li")); 获取所有的li标签
//			$(".box li");
//			console.log($(".box").find("li"));
			$(".box").find("li").mouseenter(function(){
//				$(this).css("opacity",1);//有返回值，返回值为设置方法元素本身
				$(this).css("opacity",1).siblings('li').css("opacity",0.4);//设置兄弟事件透明度为0.4
			});
			//需求2：
			$(".box").mouseleave(function(){
//				$(".box").find("li").css("opacity",1);
				
				//在这个离开事件中，this是整个大盒子
				$(this).find("li").css("opacity",1);
			})
		</script>
	</body>
</html>
